<template>
  <div class="screenshot-palette">
    <div
      v-for="(i, index) in palette"
      :key="index"
      class="item"
      :class="{ 'is-selected': index === selected }"
      :style="{ backgroundImage: `linear-gradient(45deg, ${i[0]}, ${i[1]})` }"
      @click="onSelect(i)"
    />
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/app'
import { computed } from 'vue'

interface Props {
  modelValue: [string, string]
}

interface Emits {
  (e: 'update:modelValue', value: [string, string]): void
}

const emit = defineEmits<Emits>()

const props = defineProps<Props>()

const appStore = useAppStore()

const palette: [string, string][] = [
  ['#D02F98', '#9439CA'],
  ['#A58EFB', '#CEABF9'],
  ['#FFE623', '#FFE623'],
  ['#4169E1', '#4169E1'],
  ['#FC3CAD', '#FC3CAD'],
  ['#8E00A7', '#8E00A7']
]

const selected = computed(() =>
  palette.findIndex(i => i.every((c, idx) => c === props.modelValue[idx]))
)

const onSelect = (value: [string, string]) => {
  emit('update:modelValue', value)
}

const itemBorderColor = computed(() =>
  appStore.isLightTheme ? '#fff' : 'var(--color-contrast-high'
)
</script>

<style lang="scss" scoped>
.screenshot-palette {
  display: flex;
  gap: var(--spacing-xs);
  .item {
    padding: 2px;
    border: 2px solid v-bind(itemBorderColor);
    width: 18px;
    height: 18px;
    border-radius: 4px;
    outline: 1px solid var(--color-border);
    &.is-selected {
      outline-color: var(--color-primary);
    }
  }
}
</style>
